import React from 'react';
import { Drawer, Descriptions, Tag, Row, Col } from 'antd';

interface EquipmentViewDrawerProps {
  open?: boolean;
  visible?: boolean;
  onClose: () => void;
  equipment?: any;
}

const EquipmentViewDrawer: React.FC<EquipmentViewDrawerProps> = ({
  open,
  visible,
  onClose,
  equipment,
}) => {
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'ONLINE': return 'success';
      case 'OFFLINE': return 'default';
      case 'FAILURE': return 'error';
      default: return 'default';
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case 'ONLINE': return '正常';
      case 'OFFLINE': return '离线';
      case 'FAILURE': return '故障';
      default: return status;
    }
  };

  if (!equipment) return null;

  return (
    <Drawer
      title="设备详情"
      placement="right"
      width={600}
      onClose={onClose}
      open={open || visible}
    >
      <Descriptions bordered column={1} style={{ marginBottom: 16 }}>
        <Descriptions.Item label="设备名称">
          {equipment.name}
        </Descriptions.Item>
        <Descriptions.Item label="设备编号">
          {equipment.externalId}
        </Descriptions.Item>
        <Descriptions.Item label="设备分类">
          {equipment.categoryName}
        </Descriptions.Item>
        <Descriptions.Item label="设备品牌">
          {equipment.dockingBrandName}
        </Descriptions.Item>
        <Descriptions.Item label="安装区域">
          {equipment.areaName}
        </Descriptions.Item>
        <Descriptions.Item label="运行状态">
          <Tag color={getStatusColor(equipment.status)}>
            {getStatusText(equipment.status)}
          </Tag>
        </Descriptions.Item>
        <Descriptions.Item label="更新时间">
          {equipment.updateTime}
        </Descriptions.Item>
        <Descriptions.Item label="编辑人员">
          {equipment.updateByUserName}
        </Descriptions.Item>
      </Descriptions>

      <Row gutter={16}>
        <Col span={12}>
          <div style={{ 
            background: '#f0f2f5', 
            padding: '16px', 
            borderRadius: '8px',
            textAlign: 'center',
            marginBottom: '16px'
          }}>
            <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>
              {equipment.status === 'ONLINE' ? '在线' : equipment.status === 'OFFLINE' ? '离线' : '故障'}
            </div>
            <div style={{ color: '#666', marginTop: '8px' }}>设备状态</div>
          </div>
        </Col>
        <Col span={12}>
          <div style={{ 
            background: '#f0f2f5', 
            padding: '16px', 
            borderRadius: '8px',
            textAlign: 'center',
            marginBottom: '16px'
          }}>
            <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>
              {equipment.status === 'ONLINE' ? '100%' : equipment.status === 'OFFLINE' ? '0%' : '异常'}
            </div>
            <div style={{ color: '#666', marginTop: '8px' }}>运行效率</div>
          </div>
        </Col>
      </Row>

      <Descriptions bordered column={1}>
        <Descriptions.Item label="设备描述">
          {equipment.description || '暂无描述信息'}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ marginTop: '24px', textAlign: 'right' }}>
        <div style={{ color: '#999', fontSize: '12px' }}>
          创建时间：{equipment.createTime || equipment.updateTime}
        </div>
        <div style={{ color: '#999', fontSize: '12px', marginTop: '4px' }}>
          最近更新：{equipment.updateTime}
        </div>
      </div>
    </Drawer>
  );
};

export default EquipmentViewDrawer;